<template>
  <div class="playerControl" ref="playerControlRootRef">
    <!-- 回访的按钮 -->
    <div class="playerControl--tools">
      <div class="playerControl--tools__left">
        <!--<div class="iconbtn">-->
        <!--  <img src="@/assets/images/btn1@2x.png"/>-->
        <!--</div>-->
        <!--<div class="iconbtn">-->
        <!--  <img src="@/assets/images/btn2@2x.png"/>-->
        <!--</div>-->
        <!--<div class="iconbtn">-->
        <!--  <img src="@/assets/images/btn3@2x.png"/>-->
        <!--</div>-->
        <div class="iconbtn" @click="playerSnapShot">
          <img src="@/assets/images/btn4@2x.png"/>
        </div>
      </div>
      <div v-if="showBtn" class="playerControl--tools__center">
        <div class="iconbtn">
          <img src="@/assets/images/btn1 2@2x.png" title="单帧步退" @click="framePre"/>
        </div>
        <!--<div class="iconbtn">-->
        <!--  <img src="@/assets/images/btn2 2@2x.png" title="倒放"/>-->
        <!--</div>-->
        <!--<div class="timeText">-->
        <!--  {{ currentDateStr }}-->
        <!--</div>-->
        <div class="iconbtn">
          <img v-if="!playerOptions.isPause" src="@/assets/images/暂停@2x.png" title="播放"
               @click="playerPause(false)" key="play"
          />
          <img v-if="playerOptions.isPause" src="@/assets/images/btn3 2@2x.png" title="暂停" key="stop"
               @click="playerPause(true)"
          />
        </div>
        <div class="iconbtn">
          <img src="@/assets/images/btn4 2@2x.png" title="单帧步进" @click="frameNext"/>
        </div>
        <div class="speed">
          <div class="speed__icon">
            <img src="@/assets/images/btn5@2x.png" title="减速播放" @click="speedPlay(-1)"/>
          </div>
          <div class="speed__text">
            {{ speedStr }}x
          </div>
          <div class="speed__icon">
            <img src="@/assets/images/btn6 2@2x.png" title="快速播放" @click="speedPlay(1)"/>
          </div>
        </div>
      </div>
      <div class="playerControl--tools__right">
        <div class="iconbtn" title="停止预览" @click="stopPlayReal">
          <img src="@/assets/images/btn6@2x.png"/>
        </div>
        <!--<div class="iconbtn">-->
        <!--  <img src="@/assets/images/btn7@2x.png"/>-->
        <!--</div>-->
        <!--<div class="iconbtn">-->
        <!--  <img src="@/assets/images/btn8@2x.png"/>-->
        <!--</div>-->
        <div class="iconbtn" @click="playerFullScreen">
          <img src="@/assets/images/icon_放大@2x.png"/>
        </div>
        <!--<div class="iconbtn">-->
        <!--  <img src="@/assets/images/btn10@2x.png"/>-->
        <!--</div>-->
      </div>
    </div>
    <div v-if="showBtn" class="timeline">
      <!-- 时间轴线 -->
      <div class="TimeLineAxis" ref="timeLineAxis">
        <!-- 所有的刻度 -->
        <div
          class="TimeLineAxis--line"
          :style="scaleStyle"
          @mousedown="moveMouseDown"
          @mouseenter="moveMousEnter"
          @mouseup="moveMousUp"
          @mousemove="moveMousMove"
          @click="changeTime($event)"
        >
          <!--
            @mousedown="moveMouseDown"
            @mouseup="moveMousUp"
            @mousemove="moveMousMove"
            @mousewheel="mouseScaleAction($event)"
          -->
          <!-- 10分钟为一个刻度，一天有 6 * 24 个刻度 -->
          <div
            class="TimeLineAxis--line__item"
            v-for="(item, index) in keduCount"
            :key="index"
            :index="index"
          >
            <div class="kedu" :class="{ hour: isShowTimelineKedu(index) }" :index="index">
              <span v-if="isShowTimelineKedu(index)">
                {{ calcKeduValue(index) }}:00
              </span>
            </div>
          </div>
          <!-- 统计有多少个 告警 -->
          <div
            class="timeline--statisticswarn"
            :style="`--oneHourLength:${statisticsOptions.oneHourLength}px;--offsetLength:${statisticsOptions.offsetLength}px`"
          >
            <div class="pianyi" style="min-width: var(--offsetLength)"></div>
            <div
              v-for="(item, index) in statisticsWarnOptions.statisticArr"
              :key="index"
              class="timeline--statisticswarn__hour"
              :class="getStatisticClass(item)"
            >
              <span @click="chooseAlarmStatisticsNum($event, item)">{{ item.count }}</span>
            </div>
          </div>
          <!-- 统计有多少个 订单 -->
          <div
            class="timeline--statistics"
            :style="`--oneHourLength:${statisticsOptions.oneHourLength}px;--offsetLength:${statisticsOptions.offsetLength}px`"
          >
            <div class="pianyi" style="min-width: var(--offsetLength)"></div>
            <div
              v-for="(item, index) in statisticsOptions.statisticArr"
              :key="index"
              class="timeline--statistics__hour"
              :class="getStatisticClass(item)"
            >
              <span @click="chooseStatisticsNum($event, item)">{{ item.count }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 指针 -->
      <div class="timeline--pointer">
        <!--<span>{{ scrollTimeStr || currentDateStr.split(' ')[1] }}</span>-->
        <div class="timeline--pointer__top"></div>
        <div class="timeline--pointer__center"></div>
        <div class="timeline--pointer__bottom"></div>
      </div>
    </div>
    <div v-if="false">
      <el-button @click="getHoursArr">获取时间段</el-button>
      <el-button @click="startPlayBackByIndexcode">回播</el-button>
      <el-button @click="playerSound(true)">开启声音</el-button>
      <el-button @click="playerSound(false)">关闭声音</el-button>
      <el-button @click="deviceTalk(true)">开始对讲</el-button>
      <el-button @click="deviceTalk(false)">结束对讲</el-button>
    </div>
  </div>
</template>

<script>
// import { hisDateArr } from '@/assets/mock/data'
import moment from 'moment'
import {getOrderStatisticsService, getAlarmCountService} from '@/api/marketApi.js';
import {formatDate} from '@/utils/util.js'
import {debounce} from '@/utils/util'
import {Message, Notification} from 'hui';


function filterTextBind(e) {
  console.log('e.wheelDelta 1', e.wheelDelta)
  if (e.wheelDelta > 0) {
    // 滚轮向上，则相同的宽度，代表的时间变短
    if (this.scaleMode >= 4) {
      this.scaleMode = 4
    } else {
      this.scaleMode = this.scaleMode + 1
    }
    // this.options.minTime = 5
    // this.options.minLength = 20
  } else {
    // 滚轮向下，则相同的宽度，代表的时间变长
    if (this.scaleMode <= 0) {
      this.scaleMode = 0
    } else {
      this.scaleMode = this.scaleMode - 1
    }
    // this.options.minTime = 60
    // this.options.minLength = 40
  }
}

const inputFilter = debounce(filterTextBind, 500, false)

export default {
  props: {
    deviceInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    config: { // 用户传递过来的配置
      type: Object,
      default() {
        return {}
      }
    },
    mySimplePlayer: {
      type: Object,
      default() {
        return {}
      }
    },
    hisDateArr: {
      type: Array,
      default: function () {
        return []
      }
    },
    showBtn: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      timer: null, // 滚动条的定时器
      firstTimeStamp: 0, // 第一个开始的时间段
      lastTimeStamp: 0, // 最后 一个开始的时间段
      minTimeStamp: 0, // 时间进度轴的起始时间
      startDate: null,
      pointerPosition: 0,
      // hisDateArr: hisDateArr,
      videoArr: [],
      dateObj: null,
      hoursStatisticArr: [], // 用来统计一个小时的数据
      domWidth: -1, // 控制条的宽度是 1920 px，根据宽度、当前时间、缩放比例，计算出 左右两边的起始时间
      scaleMode: -1,
      scaleModeMap: [
        {
          minLength: 30, // 一个刻度是30px
          minTime: 10, // 最小刻度是 10 分钟
          statisticTime: 20 // 20分钟统计订单数量
        },
        {
          minLength: 40, // 一个刻度是30px
          minTime: 10, // 最小刻度是 10 分钟
          statisticTime: 20 // 20分钟统计订单数量
        },
        {
          minLength: 50, // 一个刻度是30px
          minTime: 10, // 最小刻度是 10 分钟
          statisticTime: 20 // 20分钟统计订单数量
        },
        {
          minLength: 60, // 一个刻度是30px
          minTime: 10, // 最小刻度是 10 分钟
          statisticTime: 20 // 20分钟统计订单数量
        },
        {
          minLength: 100, // 一个刻度是30px
          minTime: 10, // 最小刻度是 10 分钟
          statisticTime: 20 // 20分钟统计订单数量
        }
      ],
      options: {// 控制进度条的配置
        minLength: 30, // 一个刻度是30px
        minTime: 10, // 最小刻度是 10 分钟
        // minLength: 10, // 一个刻度是10px
        // minTime: 10, // 最小刻度是 10 分钟
        scaleNum: 3, // 时间刻度有几天，默认是 昨天、今天、明天  三天
        // currentTime: new Date(), // 当前的某一个时刻，根据当前时刻，计算出 回放进度条的位置
        currentTime: new Date('2023-11-30 7:00:00') // 当前的某一个时刻，根据当前时刻，计算出 回放进度条的位置
      },
      moveControl: {
        isDown: false, // 是否按下鼠标
        startX: 0, // 鼠标起始位置
        scrollLeft: 0 // 滚动条位置
      },
      scrollTimeStr: '', // 拖拽刻度，显示的时间
      mouseDownTime: 0, // 解决鼠标点击 和 鼠标滑动出现冲突的问题
      mouseUpTime: 0,
      // 统计的配置文件
      statisticsOptions: {
        offsetLength: 0, // 刻度的偏移宽度
        oneHourLength: 0, // 一个小时刻度的长度
        statisticArr: [
          // {
          //   count: 0
          // }
        ] // 每个小时统计的数据数量
      },
      statisticsWarnOptions: {
        offsetLength: 0, // 刻度的偏移宽度
        oneHourLength: 0, // 一个小时刻度的长度
        statisticArr: [
          // {
          //   count: 0
          // }
        ] // 每个小时统计的数据数量
      },
      setTimeoutTimer: null, // 播放的定时器，即 1s 钟变化一下
      playerOptions: {
        speed: 0, // 0 表示正常的速度播放， 1 表示2倍速度播放   -1表示 1/2 速度播放
        isPause: true, // 是否是暂停
        isForward: true // 是否是正向播放
      },
      resetComputeFlag: []// 触发重新计算的标记
    }
  },
  watch: {
    // 其他组件传递过来的 控制面板的 配置信息
    config: {
      handler: function () {
        const payAt = this.config.payAt
        // console.log('payAt', payAt)
        // 改变时间，会重新 触发刻度的渲染，但是不会触发统计的重新查询
        this.options.currentTime = new Date(new Date(payAt).getTime() - 1 * 1000) // 比实际播放时间晚2秒钟，解决实际显示视频比传递数据过来慢的bug
        this.resetComputeFlag = [] // 触发重新计算的值，规避缓存
        this.$nextTick(() => {
          // 重新获取统计的数据， true 表示强制重新获取
          this.reCalcStatisticStyle(true)
        })
      },
      deep: true,
      immediate: true
    },
    // 渲染 控制面板的 配置信息
    options: {
      handler: function () {
        // 根据当前时间，重新渲染时间刻度
        this.resetRender()
        this.reCalcStatisticStyle() // 重新计算 统计的样式
      },
      deep: true
    },
    scaleMode(newValue) {
      const config = this.scaleModeMap[newValue]
      this.options.minLength = config.minLength
      this.options.minTime = config.minTime
    },
    domWidth(newValue) {
      if (newValue > 0) {
        this.resetRender()
        this.reCalcStatisticStyle(true)
      }
    }
  },
  mounted() {
    this.scaleMode = 2
    // this.resetRender()
    // this.reCalcStatisticStyle()
    // console.log(this.$refs.playerControlRootRef)
    const rootDom = this.$refs.playerControlRootRef
    const styleObj = getComputedStyle(rootDom)
    // 根据实际宽度，计算 容器的宽度，这样就可以计算后面的时间范围了, 会监听 domWidth 的变化
    this.domWidth = parseInt(styleObj.width.split('px')[0])
  },
  computed: {
    // 展示播放速度的 字符串
    speedStr() {
      /*
         iPlayBackSpeed:
           -6,   -5,   -4,   -3,  -2,  -1, 0, 1, 2, 3, 4  对应
         1/64, 1/32, 1/16,  1/8, 1/4, 1/2, 1, 2, 4, 8, 16 倍速
      */
      const speedMap = {
        // '-6': '1/64',
        // '-5': '1/32',
        // '-4': '1/16',
        // '-3': '1/8',
        // '-2': '1/4',
        // '-1': '1/2',
        '-6': '-64',
        '-5': '-32',
        '-4': '-16',
        '-3': '-8',
        '-2': '-4',
        '-1': '-2',
        '0': '1',
        '1': '2',
        '2': '4',
        '3': '8',
        '4': '16'
      }
      const speed = this.playerOptions.speed
      return speedMap[speed + ''] || '1'
    },
    // 第一个刻度的起始时间
    firstPointDate() {
      // console.log('this.resetComputeFlag', this.resetComputeFlag) // 用来触发重新计算的功能
      const {minLength, minTime, scaleNum, currentTime} = this.options
      const domWidth = this.domWidth
      // console.log('(domWidth + this.additionalWidth) / minLength', (domWidth + this.additionalWidth) / minLength)
      // 刻度距离起始时间的 时间长度（毫秒）
      const longTime = ((domWidth + this.additionalWidth + domWidth / 2) / minLength) * minTime * 60 * 1000
      const result = new Date(currentTime.getTime() - longTime)
      return result
    },
    lastPointDate() {
      const {minLength, minTime, scaleNum, currentTime} = this.options
      const domWidth = this.domWidth
      // 刻度距离起始时间的 时间长度（毫秒）
      const longTime = ((domWidth + this.additionalWidth * 2 + domWidth / 2) / minLength) * minTime * 60 * 1000
      const result = new Date(currentTime.getTime() + longTime)
      return result
    },
    /*
    为了保证一个屏幕的刻度是整数倍，如果不是被刻度整除，则需要额外添加一个宽度凑成一个整数刻度
    1. 一个屏幕的宽度是刻度的整数倍
    2. 当前的时间如果不满足一个刻度的宽度，则需要不足当前时间的刻度 为整数宽度
    */
    additionalWidth() {
      // console.log('this.resetComputeFlag', this.resetComputeFlag) // 用来触发重新计算的功能
      const {minLength, minTime, scaleNum, currentTime} = this.options
      const domWidth = this.domWidth
      // 1. 保证一个屏幕的最小刻度的整数倍 补偿
      const additionalWidth1 = (domWidth / minLength - Math.floor(domWidth / minLength)) * minLength || 0
      // 2. 如果当前时间 不是在整点，需要在总长度的基础上 要添加偏移（已经走过的分钟 + 秒的时间）, 这样保证 其实时间，即，第一个点位是有刻度的
      const additionalWidth2 = ((currentTime.getMinutes() / minTime) - Math.floor(currentTime.getMinutes() / minTime)) * minLength || 0

      return additionalWidth1 + additionalWidth2
    },
    // 计算出时间轴的最大宽度
    scaleStyle() {
      const {minLength, minTime, scaleNum, currentTime} = this.options
      const domWidth = this.domWidth
      // 1个刻度代表10分钟，1个刻度的宽度是 8px, this.scaleNum 代表扩大背书
      const oneScreenLength = Math.ceil(domWidth / minLength) * minLength
      // console.log('oneScreenLength', oneScreenLength)
      const result = oneScreenLength * scaleNum + 'px'
      return `width: ${ result }; --minScaleWidth: ${ minLength }px`
    },
    // 计算出有多少个刻度
    keduCount() {
      // (item, index) in 144 * scaleNum
      const {minLength, minTime, scaleNum, currentTime} = this.options
      const domWidth = this.domWidth

      // console.log('domWidth / minLength / minTime * scaleNum', (domWidth / minLength / minTime) * scaleNum)
      const oneScreenCount = Math.ceil(domWidth / minLength) // 一个屏幕显示的刻度数量（如果不被整除，去大于这个数据的最小整数）
      const allCount = oneScreenCount * scaleNum
      return allCount
    },
    currentDateStr() {
      const {minLength, minTime, scaleNum, currentTime} = this.options
      let temp = currentTime || new Date()
      return formatDate(temp, 'yyyy-MM-dd HH:mm:ss')
    }
  },
  methods: {
    /************************ 极简播放器通用功能 start ****************************/
    // 全屏
    playerFullScreen() {
      if (document.fullscreenElement) {
        document.exitFullscreen()
      } else {
        const mySimplePlayer = this.mySimplePlayer.$el
        let d = mySimplePlayer.parentElement
        d.requestFullscreen()
      }
    },
    // 截屏 --- 单张截图接口
    playerSnapShot() {
      const playerObj = this.mySimplePlayer.getPlayerRef()
      let params1 = {}
      params1.strCameraName = 'cameraName' /* 换成需要保存的截图名称 */
      params1.isSmallEagleEyeAbility = 0 /* 是否是小鹰眼设备 默认0不是 1是*/
      //params1.strSavePath = "C:/capture"; /* 换成保存截图的路径 */
      //params1.iSnapMode = 0; /* 抓拍模式0 单张 */
      playerObj.snapShot(params1)
    },
    // 停止预览
    stopPlayReal() {
      const playerObj = this.mySimplePlayer.getPlayerRef()
      playerObj.doClear({})
    },
    // 开启 和 关闭声音
    playerSound(bOpen) {
      const playerObj = this.mySimplePlayer.getPlayerRef()
      let params = {}
      params.bOpen = bOpen
      playerObj.sound(params).then(res => {
        console.log(res)
      })
    },
    /* 对讲接口 */
    deviceTalk(bStart) {
      console.log(this.config)
      const {indexCode} = this.config
      const playerObj = this.mySimplePlayer.getPlayerRef()
      let params = {}
      params.bStart = bStart //true开始  false结束
      params.strIndexcode = indexCode
      playerObj.deviceTalk(params)
    },
    /* 暂停、恢复回放 */
    playerPause(bPause) {
      this.playerOptions.isPause = !bPause
      const playerObj = this.mySimplePlayer.getPlayerRef()
      let params = {}
      params.bPause = bPause /* true暂停 false恢复 */
      // params.bPause = true /* true暂停 false恢复 */
      playerObj.pause(params)
      if (bPause) {
        this.stopTimeChange(false) // 也停止计数
      } else {
        this.playTimeChange() // 开始计数
      }
    },
    // 单帧退
    async framePre() {
      const playerObj = this.mySimplePlayer.getPlayerRef()
      let params = {}
      let res = await playerObj.framePre(params)
      console.log(JSON.stringify(res)) // {"msg":"FramePre success"}
    },
    // 单帧进
    async frameNext() {
      const playerObj = this.mySimplePlayer.getPlayerRef()
      let params = {}
      let res = await playerObj.frameNext(params)
      console.log(JSON.stringify(res)) // {"msg":"FrameNext success"}
    },
    // 倍速回放接口 —— 快退  快进  前进播放  回播
    speedPlay(step) {
      const playerObj = this.mySimplePlayer.getPlayerRef()
      this.playerOptions.speed = this.playerOptions.speed + step
      let params = {}
      /*
         iPlayBackSpeed:
           -6,   -5,   -4,   -3,  -2,  -1, 0, 1, 2, 3, 4  对应
         1/64, 1/32, 1/16,  1/8, 1/4, 1/2, 1, 2, 4, 8, 16 倍速
      */
      params.iPlayBackSpeed = this.playerOptions.speed
      params.bShowSpeedPlayWnd = false /* 是否需要展示速度选择框 */
      playerObj.speedPlay(params)
      this.resetSpeedTimer() // 重置定时器时间的跨度
    },
    // 重置播放速度的定时器, 实际上还是1秒钟刷新一次，只是跳的数值有变化
    resetSpeedTimer() {
      const speed = this.playerOptions.speed
      const speedMap = {
        '-6': (1 / 64),
        '-5': (1 / 32),
        '-4': (1 / 16),
        '-3': (1 / 8),
        '-2': (1 / 4),
        '-1': (1 / 2),
        // '-6': '-64',
        // '-5': '-32',
        // '-4': '-16',
        // '-3': '-8',
        // '-2': '-4',
        // '-1': '-2',
        '0': 1,
        '1': 2,
        '2': 4,
        '3': 8,
        '4': 16
      }
      if (this.setTimeoutTimer) {
        clearTimeout(this.setTimeoutTimer)
      }
      this.setTimeoutTimer = setInterval(() => {
        const oneTime = speedMap[speed + '']
        this.options.currentTime = new Date(this.options.currentTime.getTime() + Math.floor(1000 * oneTime))
      }, 1000)
    },
    // 计算是否显示 统计按钮
    getStatisticClass(info) {
      if ((info.count + '') === '0') {
        return 'hide'
      }
      return ''
    },
    // 选中 告警 某个统计数据触发的事件
    chooseAlarmStatisticsNum(e, dateRange) {
      e.stopPropagation()
      this.$emit('chooseStatistic', {
        type: 'alarm',
        ...dateRange,
        orderEndTime: dateRange.alarmEndTime,
        orderStartTime: dateRange.alarmStartTime
      })
    },
    // 选中 订单 某个统计数据触发的事件
    chooseStatisticsNum(e, dateRange) {
      e.stopPropagation()
      this.$emit('chooseStatistic', {
        type: 'order',
        ...dateRange
      })
    },
    // 获取整个进度条的 整数的时间段
    getHoursArr(isForceRequest = false) {
      // 统计的时间
      const statisticTime = this.scaleModeMap[this.scaleMode].statisticTime || 60
      // console.log('statisticTime', statisticTime)
      const startDate = moment(this.firstPointDate).startOf('hour').add(1, 'hour').toDate()
      const hours = (this.lastPointDate.getTime() - this.firstPointDate.getTime()) / (statisticTime * 60 * 1000)
      const minHours = Math.floor(hours)
      const {minLength, minTime, scaleNum, currentTime} = this.options
      const oneHourLength = (statisticTime / minTime) * minLength // 一个小时的宽度
      // const oneHourLength = (60 / minTime) * minLength // 一个小时的宽度
      const offsetLength = ((startDate.getTime() - this.firstPointDate.getTime()) / (60 * 1000 * minTime)) * minLength // 刻度的偏移宽度
      const dateArr = []
      const dateStrArr = []
      for (let i = 0; i <= minHours; i++) {
        // const tempDate = new Date(startDate.getTime() + i * 60 * 60 * 1000)
        const tempDate = new Date(startDate.getTime() + i * statisticTime * 60 * 1000)
        dateArr.push(tempDate)
        dateStrArr.push(formatDate(tempDate))
      }
      const result = []
      const alarmResult = []
      for (let i = 0; i < dateStrArr.length - 1; i++) {
        result.push({
          'orderStartTime': dateStrArr[i],
          'orderEndTime': dateStrArr[i + 1]
        })
        alarmResult.push({
          'alarmStartTime': dateStrArr[i],
          'alarmEndTime': dateStrArr[i + 1]
        })
      }

      if (isForceRequest) { // 强制请求，解决第一次进来，就要获取统计数据
        const paramObj = {
          'cameraIndexCode': this.deviceInfo.data.indexCode,
          'periodList': result
        }
        const alarmParamObj = {
          'cameraIndexCode': this.deviceInfo.data.indexCode,
          'periodList': alarmResult
        }
        // 订单统计
        getOrderStatisticsService(paramObj).then(res => {
          const tempArr = res.data || []
          this.statisticsOptions.offsetLength = offsetLength // 刻度的偏移宽度
          this.statisticsOptions.statisticArr = tempArr  // 统计的数据
          this.statisticsOptions.oneHourLength = oneHourLength // 一个小时的宽度
        })
        // 告警统计
        getAlarmCountService(alarmParamObj).then(res => {
          const tempArr = res.data || []
          this.statisticsWarnOptions.offsetLength = offsetLength // 刻度的偏移宽度
          this.statisticsWarnOptions.statisticArr = tempArr  // 统计的数据
          this.statisticsWarnOptions.oneHourLength = oneHourLength // 一个小时的宽度
        })
      } else { // 不是强制渲染，判断是否是整点，如果是整点，就要从后台重新获取统计数据
        const currentTime = this.options.currentTime
        // const timeStr = formatDate(currentTime, 'mm:ss') // 每个小时统计一次
        const timeStr = formatDate(currentTime, 'ss') // 每一个分钟统计一次
        // console.log('timeStr', timeStr)
        if (timeStr === '00') { // 表示现在是整点，才获取统计数据
          const paramObj = {
            'cameraIndexCode': this.deviceInfo.data.indexCode,
            'periodList': result
          }
          const alarmParamObj = {
            'cameraIndexCode': this.deviceInfo.data.indexCode,
            'periodList': alarmResult
          }
          getOrderStatisticsService(paramObj).then(res => {
            const tempArr = res.data || []
            this.statisticsOptions.offsetLength = offsetLength // 刻度的偏移宽度
            this.statisticsOptions.statisticArr = tempArr  // 统计的数据
            this.statisticsOptions.oneHourLength = oneHourLength // 一个小时的宽度
          })
          // 告警统计
          getAlarmCountService(alarmParamObj).then(res => {
            const tempArr = res.data || []
            this.statisticsWarnOptions.offsetLength = offsetLength // 刻度的偏移宽度
            this.statisticsWarnOptions.statisticArr = tempArr  // 统计的数据
            this.statisticsWarnOptions.oneHourLength = oneHourLength // 一个小时的宽度
          })
        } else { // 不是强制渲染，不是整点，需要重新计算刻度的偏移，保证 统计数据居中显示
          this.statisticsOptions.offsetLength = offsetLength // 刻度的偏移宽度
          this.statisticsOptions.oneHourLength = oneHourLength // 一个小时的宽度
        }
      }


    },
    // 3.1 根据监控点信息及开始结束时间进行查询并回放
    startPlayBackByIndexcode() {
      const playerObj = this.mySimplePlayer.getPlayerRef()
      const {indexCode} = this.config
      let params = {}
      let queryParams = {} /* 回放请求体参数 */
      // queryParams.indexCode = indexCode
      queryParams.indexCode = '057299e26cab4f89a0db5e141fabdddf'
      //this.$refs.txtIndexcode.value; /* 监控点编号 */
      queryParams.recordStyle = 1 /* 传0是查询中心存储  传1是查询设备存储 */
      queryParams.recordType =
        '0|1|2|6' /* 录像类型 传空查询全部录像片段 "0|1|2|6" 0定时录像 1移动侦测 2报警触发 6手动录像 */
      queryParams.transmode = 1 /*0 UDP 1 TCP*/
      queryParams.streamType = 0 /* 0主码流 1子码流 */
      /* ISO带时区格式时间 2019-11-15T00:00:00.000+08:00*/
      // queryParams.playTime = '2023-12-06T00:00:03.000+08:00';
      queryParams.startTime = '2023-12-05T00:00:03.000+08:00'
      queryParams.endTime = '2023-12-06T00:00:15.000+08:00'
      params.strRecordParam = queryParams
      params.bShowBottomFunc = false /* 回放是否显示底部的进度条及其他功能 */
      params.bShowDownload = false /* 是否需要显示下载录像片段入口 */
      let res = playerObj.startPlayBack(params)
      console.log('startPlayBack reslut:' + JSON.stringify(res))
      // 将当前的时间改为 回放记录的时间
      this.options.currentTime = new Date(queryParams.startTime) // 这里有个bug，播放的时间比显示的时间晚 2~3秒钟
    },
    /************************ 极简播放器通用功能 end ****************************/
    // 重新计算 统计的样式
    reCalcStatisticStyle(isForceRequest = false) {
      this.getHoursArr(isForceRequest)
    },
    // 鼠标滚动，放大、缩小比例尺
    mouseScaleAction(e) {
      inputFilter.bind(this)(e)
    },
    // 用户点击某个时刻，进度条要切换到某个时候
    changeTime(e) {
      if (this.mouseUpTime - this.mouseDownTime > 200) {
        // 鼠标按下时间和抬起时间间隔大于500ms，判定为mouseup事件触发，不执行click逻辑
        return
      }
      let srcElement = null
      if (e.srcElement.classList.value.indexOf('hour') > -1) {
        // 表示鼠标点击的是 小时
        srcElement = e.srcElement.parentElement
      } else {
        srcElement = e.srcElement
      }
      const {minLength, minTime, scaleNum, currentTime} = this.options
      let mouseLength = srcElement.offsetLeft + e.offsetX // 总共距离最左边有多少个像素
      const minutes = (mouseLength / minLength) * minTime // 将长度转换为 时间 分钟，从当前时间的昨天凌晨开始计算
      const temp = this.firstPointDate.getTime() + minutes * 60 * 1000
      if (new Date().getTime() < temp) { // 如果用户选择的时间大于当前的时间，则要给出提示
        // console.log('不能选择超过当前的时间')
        Notification({
          title: '提示',
          message: '不能选择超过当前的时间'
        })
        return
      }
      this.options.currentTime = new Date(temp) // 用户点击的时间 为当前时间
      this.stopTimeChange() // 阻止时间继续跳转，要重新发送请求给极简播放器，重新获取视频播放数据，获取成功之后，再继续开始跳动时间
      // this.resetRender(); // 重新渲染刻度
    },
    // 开始时间跳动运行 (要让视频开始播放了之后再触发，以免出现视频还没有开始播放就开始计时了)
    playTimeChange() {
      if (this.setTimeoutTimer) {
        clearTimeout(this.setTimeoutTimer)
      }
      this.setTimeoutTimer = setInterval(() => {
        this.options.currentTime = new Date(this.options.currentTime.getTime() + 1000)
      }, 1000)
    },
    // 阻止时间跳动运行， isEmit 是否要告知其他组件
    stopTimeChange(isEmit = true) {
      if (this.setTimeoutTimer) {
        clearTimeout(this.setTimeoutTimer)
      }
      if (isEmit) {
        this.$nextTick(() => {
          this.$emit('timechange', this.options.currentTime)
        })
      }
    },
    // 根据当前时间，重新渲染时间刻度
    resetRender() {
      const domWidth = this.domWidth
      // 一个屏幕宽度 额外增加的长度
      const additionalWidth = this.additionalWidth
      // 1个刻度代表10分钟，1个刻度的宽度是 8px, this.scaleNum 代表扩大倍数
      const oneScreenLength = domWidth + additionalWidth
      // 2. 获取进度条的可视区域总宽度，刻度站在中间位置，占总宽度的一半
      const timeLineAxisDom = this.$refs.timeLineAxis
      // 4. 设置进度条的宽度
      this.$nextTick(() => {
        timeLineAxisDom.scrollLeft = oneScreenLength
      })
    },
    moveMousEnter(e) {
      this.scrollTimeStr = '' // 将鼠标拖拽显示内容为空
    },
    moveMouseDown(e) {
      this.mouseDownTime = new Date().getTime()
      e.preventDefault()
      e.stopPropagation()
      const container = this.$refs.timeLineAxis
      this.moveControl.isDown = true
      this.moveControl.startX = e.pageX - container.offsetLeft
      this.moveControl.scrollLeft = container.scrollLeft
    },
    moveMousUp(e) {
      this.mouseUpTime = new Date().getTime()
      e.preventDefault()
      e.stopPropagation()
      this.moveControl.isDown = false
      if (this.mouseUpTime - this.mouseDownTime > 200) {
        // 鼠标按下时间和抬起时间间隔大于500ms，判定为mouseup事件触发，不执行click逻辑
        this.calcPointerTime() // 计算指针指向的时间
      }
      // const el = e.srcElement
      // el.style.pointerEvents = 'all'
    },
    moveMousMove(e) {
      if (!this.moveControl.isDown) return
      e.preventDefault()
      // el指的是dom元素，你要阻止事件穿透的容器
      const container = this.$refs.timeLineAxis
      const x = e.pageX - container.offsetLeft
      const walk = (x - this.moveControl.startX) * 2 // 滑动距离
      container.scrollLeft = this.moveControl.scrollLeft - walk

      const dateObj = this.getScrollTime()
      this.scrollTimeStr = formatDate(dateObj, 'HH:mm:ss')
    },
    // 获取滚动条的偏移时间
    getScrollTime () {
      // 1. 获取进度条的长度
      const timeLineAxisDom = this.$refs.timeLineAxis
      const scrollLeft = timeLineAxisDom.scrollLeft // 进度条的长度
      console.log('scrollLeft', scrollLeft);

      // 3. 根据总长度，推算出 时间
      const domWidth = this.domWidth
      const allLength = scrollLeft + domWidth / 2
      const {minLength, minTime, scaleNum, currentTime} = this.options

      const minutes = (allLength / minLength) * minTime
      const temp = this.firstPointDate.getTime() + minutes * 60 * 1000
      const dateObj = new Date(temp)
      return dateObj
    },
    // 计算指针指向的时间
    calcPointerTime() {
      // // 1. 获取进度条的长度
      // const timeLineAxisDom = this.$refs.timeLineAxis
      // const scrollLeft = timeLineAxisDom.scrollLeft // 进度条的长度
      // console.log('scrollLeft', scrollLeft);
      //
      // // 3. 根据总长度，推算出 时间
      // const domWidth = this.domWidth
      // const allLength = scrollLeft + domWidth / 2
      // const {minLength, minTime, scaleNum, currentTime} = this.options
      //
      // const minutes = (allLength / minLength) * minTime
      // const temp = this.firstPointDate.getTime() + minutes * 60 * 1000
      const temp = this.getScrollTime().getTime()
      if (new Date().getTime() < temp) { // 如果用户选择的时间大于当前的时间，则要给出提示
        // console.log('不能选择超过当前的时间')
        Notification({
          title: '提示',
          message: '不能选择超过当前的时间'
        })
        // el指的是dom元素，你要阻止事件穿透的容器
        const container = this.$refs.timeLineAxis
        container.scrollLeft = this.moveControl.scrollLeft
        return
      }
      this.options.currentTime = new Date(temp) // 用户点击的时间 为当前时间

      this.stopTimeChange() // 阻止时间继续跳转，要重新发送请求给极简播放器，重新获取视频播放数据，获取成功之后，再继续开始跳动时间
    },
    // 获取最小时间
    getMinDate() {
      const dateStrArr = Object.keys(this.dateObj)
      const dateTimeStamp = []
      dateStrArr.forEach(item => {
        dateTimeStamp.push(new Date(item + ' 00:00:00').getTime())
      })
      // 时间轴的起始位置时间戳
      this.minTimeStamp = Math.min(...dateTimeStamp) - 24 * 60 * 60 * 1000
    },
    dateFormat(fmt, date) {
      let ret
      const opt = {
        'y+': date.getFullYear().toString(), // 年
        'm+': (date.getMonth() + 1).toString(), // 月
        'd+': date.getDate().toString(), // 日
        'h+': date.getHours().toString(), // 时
        'M+': date.getMinutes().toString(), // 分
        's+': date.getSeconds().toString() // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      }
      for (const k in opt) {
        ret = new RegExp('(' + k + ')').exec(fmt)
        if (ret) {
          fmt = fmt.replace(ret[1], ret[1].length === 1 ? opt[k] : opt[k].padStart(ret[1].length, '0'))
        }
      }
      return fmt
    },
    getVideoStyle(videoObj) {
      return {
        width: videoObj.width + 'px',
        left: videoObj.position + 'px'
      }
    },
    calcKeduValue(index) {
      const {minLength, minTime, scaleNum, currentTime} = this.options
      const firstPointDate = this.firstPointDate
      const currentDate = new Date(firstPointDate.getTime() + index * minTime * 60 * 1000)
      // 判断当前时间是否为整点
      if (
        currentDate.getMinutes() === 0
        // currentDate.getSeconds() === 0 &&
        // currentDate.getMilliseconds() === 0
      ) {
        // console.log('当前时间是整点')
        return currentDate.getHours()
      } else {
        // console.log('当前时间不是整点')
        return
      }
    },
    isShowTimelineKedu(index) {
      const {minLength, minTime, scaleNum, currentTime} = this.options
      const firstPointDate = this.firstPointDate
      // console.log('firstPointDate', firstPointDate)
      const currentDate = new Date(firstPointDate.getTime() + index * minTime * 60 * 1000)
      // 判断当前时间是否为整点
      if (
        currentDate.getMinutes() === 0
        // currentDate.getSeconds() === 0
        // currentDate.getMilliseconds() === 0
      ) {
        // console.log('当前时间是整点')
        return true
      } else {
        // console.log('当前时间不是整点')
        return
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// 最小刻度宽度的高度，这里是10分钟
$minScaleHeight: 8px;
// 刻度的高度
$scaleHeight: 36px;
.playerControl {
  // 容器的总高度
  --containerHeight: 63px;
  box-sizing: border-box;

  &--tools {
    display: flex;
    justify-content: space-between;
    height: 48px;
    background: #333333;
    padding-top: 7px;
    position: relative;

    &__left {
      display: flex;
    }

    &__center {
      display: flex;
      justify-content: center;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 48px;
      padding-top: 7px;
      pointer-events: none;

      div {
        pointer-events: all;
      }

      .timeText {
        width: 160px;
        height: 40px;
        line-height: 40px;
        background: rgba(255, 255, 255, 0.12);

        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.9);
        letter-spacing: 0;
        text-align: center;
        font-weight: 400;

        position: relative;
        top: -3px;
      }

      .speed {
        width: 96px;
        height: 24px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 12px;
        display: flex;
        justify-content: space-between;
        padding: 0 8px;

        position: relative;
        top: 6px;

        &__icon {
          width: 24px;
          height: 25px;
          cursor: pointer;

          img {
            width: 100%;
            height: auto;
            max-height: 25px;
          }
        }

        &__text {
          width: 32px;
          font-family: Helvetica;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.4);
          letter-spacing: 0;
          text-align: center;
          line-height: 24px;
          font-weight: 400;
        }
      }
    }

    &__right {
      display: flex;
    }

    .iconbtn {
      width: 32px;
      height: 33px;
      cursor: pointer;

      img {
        width: 100%;
        height: auto;
        max-height: 33px;
      }
    }
  }

  .timeline {
    position: relative;
    height: var(--containerHeight);

    &:hover{
      .timeline--pointer{
        span {
          display: inline-block;
        }
      }
    }


    .TimeLineAxis {
      width: 100%;
      overflow-x: scroll;
      height: var(--containerHeight);
      background: #262626;
      color: #b3afaf;
      position: relative;

      &--line {
        --minScaleWidth: 8px; // // 最小刻度宽度的像素，这里是10分钟
        height: 100%;
        width: calc(var(--minScaleWidth) * 6 * 24);
        font-size: 12px;
        position: relative;
        z-index: 999;
        overflow-y: hidden;

        &__item {
          width: var(--minScaleWidth);
          height: $scaleHeight;
          display: inline-block;
          position: relative;

          .kedu {
            border-right: 1px solid #b3afaf;
            display: inline-block;
            height: $minScaleHeight;
            position: absolute;
            top: 0;
            left: 0;
            user-select: none;

            &.hour {
              height: 15px;

              span {
                position: absolute;
                top: 18px;
                right: -15px;
              }
            }
          }

          // 最后一个刻度
          // &:last-child{
          //   .kedu{
          //     // right:0;
          //     &.hour{
          //       height: $minScaleWidth;
          //     }
          //   }
          //   &::after{
          //     content: "";
          //     display: inline-block;
          //     height: 15px;
          //     border-right: 1px solid #b3afaf;
          //     position: absolute;
          //     right: 0;
          //   }
          // }
        }
      }

      &--timelist {
        position: absolute;
        left: 0;
        width: calc(var(--minScaleWidth) * 6 * 24);
        bottom: 0;
        height: 20px;
        // border: 1px solid red;
        pointer-events: none;

        &__item {
          background-color: #4e6fae;
          width: 30px;
          height: calc(var(--containerHeight) - $scaleHeight);
          position: absolute;
          left: 50px;
        }
      }
    }

    &--pointer {
      position: absolute;
      left: 50%;
      top: 0;
      height: 63px;
      z-index: 1000;

      span{
        pointer-events: none;
        background-color: #fff;
        position: absolute;
        top: 18px;
        left: 5px;
        padding: 0 8px;
        display: none;
      }

      &__top {
        position: absolute;
        top: 14px;
        right: -9px;
        width: 20px;
        height: 8px;
        background-image: url("~@/assets/images/Combined Shape1x.png");
        background-size: cover;
      }

      &__center {
        border-right: 2px solid #fff;
        height: 100%;
      }

      &__bottom {
        position: absolute;
        bottom: 20px;
        right: -9px;
        width: 20px;
        height: 8px;
        background-image: url("~@/assets/images/Combined Shape1x.png");
        background-size: cover;
        transform: rotate(180deg);
      }
    }

    &--statisticswarn {
      --oneHourLength: 0px; // 一个小时的长度
      --offsetLength: 0px; // 偏移的位置
      position: absolute;
      // bottom: 0;
      bottom: 20px;
      left: 0;
      width: 100%;
      //background-color: none;
      height: 20px;
      display: flex;
      pointer-events: none;

      &__hour {
        width: var(--oneHourLength);
        min-width: var(--oneHourLength);
        text-align: center;

        &.hide {
          visibility: hidden;
        }

        span {
          display: inline-block;
          width: 23px;
          height: 16px;
          background: #E64D4D;
          border: 1px solid rgba(255, 255, 255, 1);
          border-radius: 2px;
          pointer-events: all;
          cursor: pointer;

          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: #ffffff;
          letter-spacing: 0;
          text-align: center;
          line-height: 12px;
          font-weight: 400;
          //transform: translateX(var(--offsetLength));
        }
      }
    }

    &--statistics {
      --oneHourLength: 0px; // 一个小时的长度
      --offsetLength: 0px; // 偏移的位置
      position: absolute;
      // bottom: 0;
      bottom: 0px;
      left: 0;
      width: 100%;
      background-color: #5881cf;
      height: 20px;
      display: flex;
      pointer-events: none;

      &__hour {
        width: var(--oneHourLength);
        min-width: var(--oneHourLength);
        text-align: center;

        &.hide {
          visibility: hidden;
        }

        span {
          display: inline-block;
          width: 23px;
          height: 16px;
          background: #05AA33;
          border: 1px solid rgba(255, 255, 255, 1);
          border-radius: 2px;
          pointer-events: all;
          cursor: pointer;

          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: #ffffff;
          letter-spacing: 0;
          text-align: center;
          line-height: 12px;
          font-weight: 400;
          //transform: translateX(var(--offsetLength));
        }
      }
    }

    ::-webkit-scrollbar {
      width: 0 !important;
    }

    ::-webkit-scrollbar {
      width: 0 !important;
      height: 0;
    }
  }
}
</style>
